<template>
    <div class="live">
        <!-- <el-page-header @back="goBack()" content="" /> -->

        <!-- 顶部搜索栏 -->
        <div class="search-wrap">
            <div class="s-inp">
                <el-input class="search_inp" placeholder="请输入直播间" v-model="searchCondition.liveTitle"
                    @keyup.enter.native="searchConfirm" clearable size="midium">
                </el-input>
            </div>
            <el-button class="search_btn" type="search" @click="searchConfirm">
                <i class="iconfont icon-sousuo search_logo"></i>
                <span class="search_title">搜索</span>
            </el-button>

            <!-- 我要直播 -->
            <!-- <a :href="'/o/live/PublishLive'"> -->
            <div class="live-start" @click="promptMessage">
                我要直播
            </div>
            <!-- </a> -->
        </div>

        <!-- 直播列表 -->
        <div class="live-main" v-show="liveListYes">
            <div class="live-list">
                <!-- item-hover\enter() 的意思是高亮显示 -->
                <live-item class="main-data-item" :class="currentIndex == index ? 'item-hover' : ''"
                    v-for="(item, index) in liveList" :key="index" :live="item" @mouseenter.native="enter(index)"
                    @mouseleave.native="leave()">
                </live-item>
            </div>

            <!-- 分页功能 -->
            <el-pagination background layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange"
                @size-change="handleSizeChange" :current-page="searchCondition.currentPage"
                :page-size="searchCondition.currentSize" :pager-count="11" :page-sizes="[20, 50, 200]"
                :total="mainDataListLength">
            </el-pagination>
        </div>

        <div class="live-list-no" v-show="!liveListYes">
            <img src="@/assets/img/no-data.png" alt="" />
        </div>
    </div>
</template>

<script>
import { pageListLive } from "@/api/other/live";

import LiveItem from "@/views/live/LiveItem";

export default {
    name: "LiveList",
    components: {
        LiveItem,
    },
    data() {
        return {
            // 直播列表
            liveList: [],
            // 判断是否有数据 显示没有数据图片
            liveListYes: true,
            mainDataListLength: 0,
            // 鼠标移进的当前item
            currentIndex: null,
            // 列表查询接口的搜索条件
            searchCondition: {
                liveTitle: "",
                currentPage: 1,
                currentSize: 20,
            },
        }
    },
    created() {
        this.getData();
    },

    methods: {
        // 获取内容数据
        async getData() {
            const { data: res } = await pageListLive(this.searchCondition);
            console.log(res.data);
            if (res.data.total === 0) {
                this.liveListYes = false;
            } else {
                this.liveListYes = true;
                this.liveList = res.data.list;
                this.mainDataListLength = res.data.total;
                // this.mainDataListCopy = res.data.list;
            }
        },

        // 确定搜索
        searchConfirm() {
            if (this.searchCondition.liveTitle == "请输入直播间" || this.searchCondition.liveTitle == "") {
                this.$message.warning("请输入要查询的直播间信息!");
                return;
            } else if (this.searchCondition.liveTitle == this.$router.history.current.query.keyword) {
                return;
            }
            this.getData();
        },

        // 当前页发生改变
        handleCurrentChange(val) {
            this.searchCondition.currentPage = val;
            this.getData();
        },
        handleSizeChange(val) {
            this.searchCondition.currentSize = val;
            this.getData();
        },

        // 鼠标事件
        enter(i) {
            this.currentIndex = i;
        },
        leave() {
            this.currentIndex = null;
        },

        // 提示信息
        promptMessage() {
            this.$message.warning("此页面还没有做好哦!");
        },
    },
}
</script>

<style>
.live {
    width: 1000px;
    margin: 0 auto;
}

.el-page-header {
    margin-top: 20px;
    margin-left: 100px;
    width: 100px;
    background-color: rgba(255, 255, 255, 0.9);
}

.search-wrap {
    /* display: flex; */
    /* margin: 0 auto; */
    margin-top: 30px;
}

.s-inp {
    float: left;
    width: 400px;
    height: 40px;
    /* flex: 1; */
}

.search_btn {
    width: 80px;
    height: 40px;
    margin-left: 10px;
    font-size: 16px;
    padding: 0;
}

.search_title {
    margin-left: 5px;
}

.live-start {
    float: right;
    margin-right: 50px;
    width: 100px;
    height: 40px;
    /* text-align: center; */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 3px solid #ffa77b;
    border-radius: 5px;
    background-color: rgb(215, 240, 255);
}

.live-main {
    width: 100%;
    margin: 0 auto;
}

/* 视频内容 */
.live-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.main-data-item {
    margin-top: 20px;
    margin-right: 25px;
}

/* 鼠标移进来添加的类名 */
.item-hover {
    background: rgba(223, 223, 223, 0.3);
}

/* 分页 */
.el-pagination {
    margin: 40px;
    margin-bottom: -100px;
    text-align: center;
    background: "#00a1d6";
}

.live-list-no {
    margin: 50px;
    text-align: center;
}
</style>


